<template>
	<view class="child-book-page">
		<view class="base-card" @click="jumpPage">
			<view class="base-txt">
				<view class="title">管理孩子</view>
				<view class="des inline"><view class="greed">{{ stdLens }}</view>个正在监护</view>
			</view>
			<image style="width: 60px;height: 60px;" src="/static/icon/children.png" />
		</view>
		<view class="base-card" @click="jumpHandelPage">
			<view class="base-txt">
				<view class="title">操作说明</view>
				<view class="des">绑定学生</view>
			</view>
			<image style="width: 60px;height: 60px;" src="/static/icon/book.png" />
		</view>
	</view>
</template>

<script setup lang="ts">
	import {computed} from 'vue'
	import { useBound } from "@/hooks/useBound.ts"
    import {useStudentListStore}  from "@/stores/useStudentList.js"
	const studentStore = useStudentListStore();
	const stdLens = computed(() =>studentStore.students.length);
	const {tipBoundStudent, studentIsEmpt} = useBound();
	const jumpPage = () => {
		if(studentIsEmpt.value){
			tipBoundStudent();
			return;
		}
		uni.navigateTo({
			url:'/pagesB/managChildren/index'
		})
	}
	
	const jumpHandelPage = () => {
		if(studentIsEmpt.value){
			tipBoundStudent();
			return;
		}
		uni.navigateTo({
			url:'/pagesC/manual/index'
		})
	}
</script>

<style lang="scss" scoped>
	.child-book-page{
		display: flex;
		justify-content: space-between;
		align-content: center;
		position: relative;
		top:160upx;
		width: 100%;
		padding: 0 17upx;
		.base-card{
			width: 49%;
			background-color: #fff;
			border-radius: 16upx;
			display: flex;
			justify-content: space-around;
			padding: 20upx 0;
			.base-txt{
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				align-items: self-start;
				.title{
					font-weight: 800;
					font-size: 35upx;
					color: #081A2A;
				}
				.des{
					font-weight: 400;
					font-size: 28upx;
					color: #999999;
				}
			}
		}
		.inline{
			display: flex;
			align-items: center;
		}
		.greed{
			color: #2BC888;
			font-weight: 600;
			font-size: 35upx;
			margin-right: 5upx;
			text-align: start;
		}
	}

</style>